<template>
  <el-menu
    :unique-opened="true"
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="transparent"
    text-color="#FFFFFF"
    active-text-color="#transparent"
    @select="handleSelect"
    menu-trigger="hover"
  >
    <el-menu-item index="1">
      <div>公司门户</div>
    </el-menu-item>

    <el-menu-item index="2" v-if="obj.role == 'common'">
      <div>个人门户</div>
    </el-menu-item>
    <el-menu-item
      index="55"
      v-if="obj.role == 'bonoSale' || obj.role == 'EtSale'"
    >
      <div>个人门户</div>
    </el-menu-item>
    <el-menu-item
      index="56"
      v-if="obj.role == 'bonoSaleAid' || obj.role == 'EtSaleAid'"
    >
      <div>个人门户</div>
    </el-menu-item>
    <el-submenu
      popper-class="custom-style"
      v-for="item in dynamicMenuItems"
      :key="item.id"
      :index="item.id.toString()"
    >
      <template slot="title">
        <div>
          {{ item.name }}
        </div>
      </template>
      <template v-for="directory in item.directory">
        <!-- 如果有三级菜单 -->
        <el-submenu
          popper-class="custom-style"
          v-if="directory.function && directory.function.length"
          :key="directory.id"
          :index="directory.id.toString()"
        >
          <template slot="title">
            <div>
              {{ directory.name }}
            </div>
          </template>
          <el-menu-item
            @click="changes(func)"
            v-for="func in directory.function"
            :key="func.id"
            :index="func.id.toString()"
          >
            {{ func.name }}
          </el-menu-item>
        </el-submenu>
        <el-menu-item
          v-else
          :key="directory.id"
          :index="directory.id.toString()"
        >
        </el-menu-item>
      </template>
    </el-submenu>
  </el-menu>
</template>
  
<script>
import { getNavbar } from "@/api/index";
export default {
  name: "CustomMenu", // 组件名称
  props: {
    initialActiveIndex: {
      type: String,
      default: "1", // 默认选中第一个菜单项
    },
    menuItems: {
      type: Array,
      default: () => [], // 接受动态菜单项
    },
  },
  data() {
    return {
      obj: {},
      activeIndex: this.initialActiveIndex, // 使用 props 传入的初始值
      portalPath: window.portalPath,
      dynamicMenuItems: [
        {
          id: 3,
          name: "动态菜单1",
          route: "/dynamic1",
          directory: [
            {
              id: 31,
              name: "子菜单1-1",
              route: "/dynamic1/sub1",
              function: [
                { id: 311, name: "功能1-1-1", route: "/dynamic1/sub1/fun1" },
                { id: 312, name: "功能1-1-2", route: "/dynamic1/sub1/fun2" },
              ],
            },
            {
              id: 32,
              name: "子菜单1-2",
              route: "/dynamic1/sub2",
              function: [],
            },
          ],
        },
        {
          id: 4,
          name: "动态菜单2",
          route: "/dynamic2",
          directory: [],
        },
      ],
    };
  },
  mounted() {
    // 检查新添加的存储数据
    const newParam = localStorage.getItem('new');
    console.log(newParam,'newParam');
    if (newParam) {
      // 如果存在，设置 activeIndex 为 1，并清除该存储
      this.activeIndex = "1";
      localStorage.removeItem('new');

    } else {
      // 获取或创建系统访问时间戳
      const currentVisitTime = localStorage.getItem('systemVisitTime');
      console.log(currentVisitTime,'currentVisitTime');
      if (!currentVisitTime) {
        // 首次进入系统，设置访问时间戳
        localStorage.setItem('systemVisitTime', new Date().getTime().toString());
        // 清除之前可能存在的选中状态
        localStorage.removeItem('activeIndex');
        this.activeIndex = "1"; // 设置默认值为公司门户
      } else {
        // 使用保存的选中状态
        const savedIndex = localStorage.getItem('activeIndex');
    
        this.activeIndex = savedIndex || "1";
      }
    }

    this.getlist();
    this.getlis1t();
  },
  methods: {
    //获取人员信息
    getlis1t() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.getBasicInfo",
      };
      getNavbar(param).then((res) => {
        this.obj = res.data;
        let company = res.data.company;

        sessionStorage.setItem("company", company);
      });
    },
    changes(func) {
      if (func.target == "mainFrame") {
        this.$router.push({
          path: "/iframe",
          query: {
            url: portalPath + "/r" + func.url.replace(".", ""),
            // url:lists.url
          },
        });
      } else if (func.target == "sidebar") {
        // 直接打开原始URL，不添加前缀或替换点
        window.open(func.url, "_blank");
      } else {
        window.open(portalPath + "/r" + func.url.replace(".", ""), "_blank");
      }
    },
    //获取菜单
    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.allnav",
        searchWord: "",
      };
      getNavbar(param).then((res) => {
        this.dynamicMenuItems = res.data.nav;
      });
    },
    handleSelect(index) {
      this.activeIndex = index;
      localStorage.setItem('activeIndex', index);

      
      if (index == 1) {
        this.$router.push({ path: "/" });
      } else if (index == 2) {
        this.$router.push({ path: "/personal" });
      } else if (index == 55) {
        this.$router.push({ path: "/sale" });
      } else if (index == 56) {
        this.$router.push({ path: "/assistant" });
      }
    },
    navigateTo(path) {
      this.$router.push(path); // 使用 Vue Router 进行跳转
    },
  },
};
</script>
  
<style lang="scss" scoped>
::v-deep .el-submenu .el-menu::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
::v-deep .el-submenu .el-menu {
  scrollbar-width: none; /* 隐藏滚动条 */
}
::v-deep .el-menu--popup-right-start {
  scrollbar-width: none; /* 隐藏滚动条 */
}
::v-deep.el-menu .el-menu-item:hover {
  outline: 0 !important;

  background: transparent !important;
}
::v-deep .el-submenu__title:hover {
  outline: 0 !important;

  background: transparent !important;
}

::v-deep .el-submenu__title i {
  display: none !important;
}
::v-deep .el-submenu__title {
  padding: 0 10px !important;
}
.el-menu-item {
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  height: 100%;
}

.el-menu--horizontal > .el-menu-item {
  height: 100%;
}

.custom-menu-item {
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
}

.active-item {
}

.el-menu-demo.el-menu--horizontal {
  ::v-deep {
    > .el-menu-item.is-active,
    > .el-submenu.is-active .el-submenu__title {
      background-image: url("../../assets/img/headerseled.png");
      /* 背景图路径 */
      background-size: 100% 100%;
      background-color: transparent !important;
      /* 调整背景图大小 */

      border-bottom: none !important;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
    }
  }
}

.el-menu.el-menu--horizontal {
  background: transparent !important;
}
</style>
<style lang="scss">
.custom-style {
  .el-submenu__title,
  .el-menu-item {
    background: #5278b4 !important;
    padding: 0 10px !important;
    &:hover {
      background: #332727 !important;
    }
  }
}
.el-menu--horizontal > .el-menu-item {
  margin-top: -2px !important;
  padding: 0 10px !important;
}
.el-submenu .el-menu {
  max-height: 550px;
  overflow-y: auto;
}
</style>
  